<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{margin: 0;padding: 0;}
			li{list-style: none;}
			#nav{width: 210px;background: #000;color: #fff;margin: 100px;}
			#nav h2{font-size: 18px;font-weight: 200;text-align: center;line-height: 50px;}
			#nav ul li{border-top: 1px solid #008000;text-indent:20px;}
			.title{padding: 20px;}
			.sMenu{color: #999999;text-align: center;line-height: 30px;background: #333;display: none;}
			.active{display: block;}
		</style>
	</head>
	<body>
		<div id="nav">
			<h2>课程列表</h2>
			<ul>
				<li>
					<div class="title">
						<img src="images/img1.png"  />
						IT培训
					</div>
					<div class="sMenu">
						<p>web前端</p>
						<p>Java web</p>
						<p>python自动化</p>
						<p>iOS开发</p>
						<p>微信小程序</p>
					</div>
				</li>
				<li>
					<div class="title">
						<img src="images/img2.png" />
						     IT培训
					</div>
					<div class="sMenu">
						<p>web前端</p>
						<p>Java web</p>
						<p>python自动化</p>
						<p>iOS开发</p>
						<p>微信小程序</p>
					</div>
				</li>
				<li>
					<div class="title">
						<img src="images/img3.png" />
						   IT培训
					</div>
					<div class="sMenu">
						<p>web前端</p>
						<p>Java web</p>
						<p>python自动化</p>
						<p>iOS开发</p>
						<p>微信小程序</p>
					</div>
				</li>
				<li>
					<div class="title">
						<img src="images/img4.png" />
						IT培训
					</div>
					<div class="sMenu">
						<p>web前端</p>
						<p>Java web</p>
						<p>python自动化</p>
						<p>iOS开发</p>
						<p>微信小程序</p>
					</div>
				</li>
			</ul>
		</div>
		<script src="js/jquery.js"></script>
		<script type="text/javascript">
			$("#nav ul li .title").click(function(){
				$(this).siblings().addClass("active").parents().siblings().find('.sMenu').removeClass("active");
				$(this).siblings().slideToggle().parents().siblings().find(".sMenu").slideUp();
			})
		</script>
	</body>
</html>
